import { selectRecord } from '@/services/api/api-assess-record';
import { ActionType, DrawerForm, ProForm, ProFormTextArea } from '@ant-design/pro-components';
import { useAccess } from 'umi';
import { Alert, Button, message, Space, Spin, Typography } from 'antd';
import FormItem from 'antd/es/form/FormItem';
import React, { useRef, useState } from 'react';
import UploadImage from '../components/UploadImage';
const { Paragraph } = Typography;
interface AddPriorityProveProps {
  title: string;
  icon: JSX.Element;
  trigger?: JSX.Element;
  illustrate: string;
  channelId: string;
  areaId: string;
  areaName: string;
  releaseTimes: Array<string>; //季度发布时间范围
  id: string;
  onRefurbish: () => void;
  data?: PriorityBo.ProveData;
  onSave: (data: PriorityBo.ProveData) => void;
}

const AddPriorityProve: React.FC<AddPriorityProveProps> = ({
  title,
  icon,
  trigger,
  illustrate,
  channelId,
  areaId,
  areaName,
  releaseTimes,
  id,
  onRefurbish,
  data,
  onSave,
}) => {
  const access = useAccess();
  const actionRef = useRef<ActionType>();

  const [details, setDetailsState] = useState<AssessRecordData.RecordSelect>();

  const getDetail = async () => {
    const res = await selectRecord({ id });
    setDetailsState(res.data);
  };

  return (
    <DrawerForm
      title={
        trigger ? (
          <Space align={'center'}>
            {icon}
            {title}
          </Space>
        ) : (
          <div style={{ display: 'flex', justifyContent: 'flex-start', textAlign: 'center', alignItems: 'center' }}>
            {icon}
            <div
              style={{
                marginLeft: '5px',
              }}
            >
              {title}
            </div>
          </div >
        )
      }
      trigger={
        trigger ? (
          trigger
        ) : (
          <Button>
            <div
              style={{
                display: 'inline-flex',
                alignItems: 'flex-start',
              }}
            >
              <div
                style={{
                  marginRight: 5,
                  padding: 2,
                }}
              >
                {icon}
              </div>
              <span> {title}</span>
            </div >
          </Button >
        )
      }
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
        width: 650,
      }}
      onVisibleChange={(visible) => {
        if (visible) {
          getDetail();
        } else {
          onRefurbish();
        }
      }}
      onFinish={async (values) => {
        let attachments = new Array();

        console.log('==dddddd====', values);

        if (values.attachments !== undefined && values.attachments.length > 0) {
          values.attachments.forEach((item) => {
            if (item.status == 'done') {
              attachments.push({
                id: item.response.data.id,
                thumbUrl: item.thumbUrl,
                file: item,
              });
            }
          });
        } else {
          message.warning('请上传证明材料！');
          return;
        }

        let saveData = {
          ...values,
          //时间戳
          id: Date.parse(new Date().toString()).toString(),
          title: title,
          icon: icon,
          channelId: channelId,
          attachments: attachments,
        };

        onSave(saveData as PriorityBo.ProveData);
        return true;
      }}
    >
      <Spin
        style={{
          textAlign: 'center',
        }}
        spinning={details === undefined}
      >
        <Typography.Paragraph
          style={{
            width: 552,
            marginBottom: 25,
          }}
        >
          <blockquote>{illustrate}</blockquote>
        </Typography.Paragraph>
        <div
          style={{
            width: 552,
            marginBottom: 25,
          }}
        >
          <Alert
            message="为保证记录被正确采纳，请尽量填相关信息，包括链接、首页截图、首屏截图、备注"
            type="warning"
            showIcon
          />
        </div>
        <FormItem
          name="attachments"
          label={
            <>
              <span
                style={{
                  color: '#ff4d4f',
                  paddingRight: 4,
                }}
              >
                *
              </span>
              证明
            </>
          }
          hidden={!access.质效评估x创建x附件}
          extra={'最多可上传50张'}
        >
          <UploadImage
            onPreview={(file) => { }}
            access={{
              isPicture: access.质效评估x创建x附件x图片,
            }}
            url="/assess/attachment/save"
            maxCount={50}
            placeholder="证明"
          />
        </FormItem>
        <ProForm.Group>
          <ProFormTextArea
            width="xl"
            name="remarks"
            label={'备注'}
            fieldProps={{
              allowClear: true,
              rows: 3,
              maxLength: 200,
            }}
          />
        </ProForm.Group>
      </Spin>
    </DrawerForm >
  );
};
export default AddPriorityProve;
